@extends('admin.base')
@section('content')
    <div class="layui-card">
        <blockquote class="layui-elem-quote form-inline layui-form" style="font-size: 14px;padding: 10px">
            <div class="layui-inline" style="margin: 3px 0;">
                <label class="control-label" for="id" style="font-weight: bold">小鹿分类ID</label>：
                <div class="layui-input-inline">
                    <input type="text" name="id" id="id" placeholder="小鹿分类ID" class="layui-input" >
                </div>
            </div>
            <div class="layui-inline" style="margin: 3px 0;">
                <label class="control-label" for="name" style="font-weight: bold">分类名称</label>：
                <div class="layui-input-inline">
                    <input type="text" name="name" id="name" placeholder="分类名称" class="layui-input" >
                </div>
            </div>
            <div class="layui-inline" style="margin: 3px 0;">
                <label class="control-label" for="level" style="font-weight: bold">级别筛选</label>：
                <div class="layui-input-inline">
                    <select id="level">
                        <option value="0">全部</option>
                        <option value="1">只显示1级分类</option>
                        <option value="2">只显示2级分类</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline" style="margin: 3px 0;">
                <label class="control-label" for="status" style="font-weight: bold">状态</label>：
                <div class="layui-input-inline">
                    <select id="status">
                        <option value="3">全部</option>
                        <option value="1">使用中</option>
                        <option value="0">已停用</option>
                    </select>
                </div>
            </div>
        </blockquote>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="statusText">
                @{{# if(d.status == 1){ }}
                <span class="layui-badge layui-bg-green">启用</span>
                @{{# }else if(d.status == 0){ }}
                <span class="layui-badge">禁用</span>
                @{{# } }}
            </script>
            <script type="text/html" id="options">
                <div class="layui-btn-group">
                    @can('cate.cate.edit')
                        <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
                    @endcan
                    @can('cate.cate.upStatus')
                        @{{# if(d.status == 1){ }}
                            <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="upStatus">禁用</a>
                        @{{# }else if(d.status == 0){ }}
                            <a class="layui-btn layui-btn-sm" lay-event="upStatus">启用</a>
                        @{{# } }}
                    @endcan
                </div>
            </script>
            <script type="text/html" id="toolbarDemo">
                <button type="button" class="layui-btn layui-btn-sm" lay-event="search">搜索</button>
            </script>
        </div>
    </div>
@endsection

@section('script')
    @can('goods.goods')
        <script>
            layui.use(['layer','table','form'],function () {
                var layer = layui.layer;
                var form = layui.form;
                var table = layui.table;
                //用户表格初始化
                var dataTable = table.render({
                    elem: '#dataTable'
                    ,height: 'full-200'
                    ,url: "{{ route('admin.cate.data') }}" //数据接口
                    ,page: true //开启分页
                    ,toolbar: '#toolbarDemo'
                    ,defaultToolbar: ['filter', 'print', 'exports']
                    ,cols: [[ //表头
                        {checkbox: true,fixed: true}
                        ,{field: 'id', title: '小鹿分类ID', sort: true,width:120}
                        ,{field: 'cate_name', title: '分类名称'}
                        ,{field: 'level', title: '分类级别',sort: true,templet:function (d) { return '<div>'+d.level+'级</div>'}}
                        ,{field: 'tao_id', title: '淘宝分类',templet:function (d) { return '<div>关联</div>'}}
                        ,{field: 'tao_id', title: '京东分类',templet:function (d) { return '<div>关联</div>'}}
                        ,{field: 'status', title: '状态',toolbar: '#statusText' ,width:70}
                        ,{fixed: 'right',title: '操作', align:'center', toolbar: '#options',width:160}
                    ]]
                });

                //监听工具条
                table.on('tool(dataTable)', function(obj){ //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
                    var data = obj.data //获得当前行数据
                        ,layEvent = obj.event; //获得 lay-event 对应的值
                    if(layEvent === 'del'){
                        layer.confirm('确认删除吗？', function(index){
                            $.post("{{ route('admin.cate.destroy') }}",{_method:'delete',ids:[data.id]},function (result) {
                                if (result.code==0){
                                    obj.del(); //删除对应行（tr）的DOM结构
                                }
                                layer.close(index);
                                layer.msg(result.msg)
                            });
                        });
                    } else if(layEvent === 'edit'){
                        location.href = '/admin/cate/'+data.id+'/edit';
                    }else if(layEvent === 'upStatus'){
                        layer.confirm('确认修改状态吗？', function(index){
                            if(data.status == 1){
                               var status=0;
                            }else{
                                var status=1;
                            }
                            layer.close(index);
                            $.post("{{ route('admin.cate.upStatus') }}",{id:data.id,status:status},function (result) {
                                if (result.code==0){
                                    dataTable.reload();
                                }else{
                                    layer.msg(result.msg,{icon:5});
                                }
                            });
                        });
                    }
                });
                table.on('toolbar', function(obj){
                    if(obj.event==='search'){
                        var id = $("#id").val();
                        var name = $("#name").val();
                        var status = $("#status").val();
                        var level = $("#level").val();
                        dataTable.reload({
                            where:{id:id,name:name,status:status,level:level},
                            page:{curr:1}
                        })
                    }
                });
            })
            function getCate() {
                layer.open({
                    type:2,
                    title:'添加商品分类',
                    area : ['630px','430px'],
                    content:"{{route('admin.cate.create')}}"
                })
            }
        </script>
    @endcan
@endsection